Cabeçalho.
Costumamos colocar imagens, logos, uma bela arte.
Importante : Ao abrir a página será este ponto o ponto focal de interesse do usuário.

Menu - É uma súmula da navegação do site.

Lateral Esquerda

Lateral Direita

O leioute quanto mais simples mais elegante.

Portanto uma página sem divisões seria o leioute mais elegante mas também a mais chata e formal.

Este leioute apesar de simples tem uma elegância muito boa.

Note que a lateral esquerda é a menor mas basta mexer em 2 parametros width das laterais e podemos fazer essas divisões ficarem como desejarmos.

Esta página foi construída com apenas com DIVS e se você não sabe que é position fixed e relative veja neste site.

Veja o código:

    <style>
        html {
            height: 100%
        }

        body {
            font-family: Arial;
            margin: 0; /*retirar o padding do body*/
            height: 100%; /*ocupar a página inteira*/
        }

        h1, h2, h3, h4, h5, h6 { /*por default o h1 a h6 tem padding-retirando*/
            margin-top: 0;
            margin-bottom: 0px
        }

        .pagina {
            position: relative;
            height: 100%
        }

        .latEsq {
            position:absolute; /*fixed relative*/
            width: 20%; /*largura da lateral esquerda*/
            height: 100%;
            overflow: auto
        }

        .latDir {
            height: 100%;
            margin-left: 20%; /*espaço para exibir a lateral esquerda*/
            position: relative;
        }
    </style>

</head>

<body>
    <div class="pagina">
        <div style="background-color:lightgray;padding:20px;text-align:center;">
            Cabeçalho.<br />
            Costumamos colocar imagens, logos, uma bela arte.<br />
            Importante : Ao abrir a página será este ponto o ponto focal de interesse do usuário.
        </div>

        <div style="background-color:lightsteelblue;padding:20px;text-align:center;">
            Menu - É uma súmula da navegação do site.<br />
            <nav class="navbar">
                <ul class="nav nav-pills ml-lg-5">
                    <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
                </ul>
            </nav>
        </div>

        <header class="latEsq" style="background-color:lightblue">
            <h1 class="site-title">Lateral Esquerda</h1>
        </header>

        <div class="latDir" style="background-color:lightgreen">
            <h1>Lateral Direita</h1>

            <p>
                O leioute quanto mais simples mais elegante. <br /><br />
                Portanto uma página sem divisões seria o leioute mais elegante mas também a mais chata e formal.<br /><br />
                Este leioute apesar de simples tem uma elegância muito boa.<br /><br />
                Note que a lateral esquerda é a menor mas basta mexer em 2 parametros width das laterais e podemos
                fazer essas divisões ficarem como desejarmos.<br /><br />
                Esta página foi construída com apenas com DIVS e se você não sabe que é position fixed e relative veja neste site.<br /><br />
            </p>
        </div>
</body>
</html>